// 标签页
function main(count) {
    const params = new URLSearchParams(window.location.search);
    const tag = params.get('tag');
    $(document).ready(function () {
        $.ajax({
            url: 'http://localhost:8080/articles?tag=' + tag, // 后端提供数据的接口地址
            type: 'GET', // 请求类型，GET 或 POST
            dataType: 'json', // 预期的服务器响应的数据类型
            success: function (data) {
                // 成功获取数据后的回调函数
                data.forEach(function (item) {
                    // 创建标签
                    var section = $('<div>').addClass('section');
                    var link = $('<a>').attr('href', 'article.html?id=' + item.id); // 替换 'article.html?id=' 为你的文章链接
                    link.css({
                        'text-decoration': 'none',
                        'color': 'black', // 设置文字颜色为黑色
                    });
                    var title = $('<h2>').text(item.title);
                    var content = $('<p>').text(item.content.substring(0, 100));
                    section.append(title, content);

                    // 添加半透明背景色
                    section.css({
                        'background-color': 'rgba(255, 255, 255, 0.8)', // 设置半透明背景色
                        'padding': '10px', // 添加一些内边距，使背景色更显眼
                        'transition': 'background-color 0.3s', // 添加背景色变化的过渡效果
                        'border-radius': '15px',
                        'margin-top': '50px',
                    });

                    // 标题与内容的间隔
                    title.css({
                        'margin-bottom': '10px',
                    })

                    // 处理鼠标悬停事件
                    section.hover(function () {
                        $(this).css({
                            'color': 'darkblue', // 鼠标悬停时改变文字颜色
                            'font-size': '20px', // 鼠标悬停时改变文字大小
                            'transition': 'color 0.3s, font-size 0.3s' // 设置悬停变化时间为0.3秒
                        });
                    }, function () {
                        $(this).css({
                            'color': 'black', // 鼠标移开时恢复文字颜色
                            'font-size': '16px' // 鼠标移开时恢复文字大小
                        });
                    });
                    link.append(section);
                    $('.container').append(link);
                });
            },
            error: function () {
                // 请求失败时的回调函数
                console.error('Failed to fetch data');
            }
        });
    });
}

export {
    main
}